import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Alert,
  Breadcrumb,
  Tabs,
  Tab,
  Form,
  Container,
  Row,
  Col,
  InputGroup,
  FormControl,
  Button,
  Tooltip,
  OverlayTrigger
} from 'react-bootstrap';
import $ from 'jquery';
import Highlight from 'react-highlight';
import queryString from 'query-string';

import { 
  URL, 
  CODE,
  H5_URL
} from '../../config';
import {
  function_get_hosts,
  function_get_dbconnectors,
  function_get_branches_by_dir
} from '../../actions/deploy';
import {
  function_add_servs,
  function_get_servs,
  function_edit_servs
} from '../../actions/servs';

import AddHost from '../team/addHost';
import AddDbConnector from '../team/addDbConnector';

import 'highlight.js/styles/atelier-plateau-dark.css'
import './less/index.css'
require("select2");

class App extends Component {

  state = {
    pid: parseInt(queryString.parse(this.props.location.search).pid),
    sid: parseInt(queryString.parse(this.props.location.search).sid),
    hasError: false,
    isLoading: false,
    errorMsg: "",
    showAddHost: false,
    showAddＤbConnector: false,
    validated: false,
    reponsitoryDirectory: null,
    targetBranch: "",
    lineHost: [],
    testHost: [],
    prevHost: [],
    lineJobHost: "",
    isTestJobDeployed: 1,
    isPrevJobDeployed: 0,
    deployDirectory: "",
    lineDb: "",
    testDb: "",
    activeTab: "basic",
  }

  componentDidMount () {
    if (this.props.location.pathname === URL.editserv_page) {
      function_get_servs(this.state.sid, this.props.dispatch, result => {
        $(this.refs.name).val(result.serviceName);
        $(this.refs.git_base).val(result.reponsitoryDirectory);
        $(this.refs.commandBeforePackage).val(result.commandBeforePackage.join("\n"));
        $(this.refs.packageDir).val(result.packageDir);
        $(this.refs.excludeFiles).val(result.excludeFiles.join("\n"));
        $(this.refs.commandBeforeDeploy).val(result.commandBeforeDeploy.join("\n"));
        $(this.refs.commandAfterDeploy).val(result.commandAfterDeploy.join("\n"));
        $(this.refs.udtGitDir).val(result.udtGitDir);
        $(this.refs.jobType).val(result.jobType);
        let targetBranch =  result.targetBranch;
        let lineDb = result.lineDb;
        let testDb = result.testDb;
        let lineHost = result.lineHost;
        let testHost = result.testHost;
        let prevHost = result.prevHost;
        let lineJobHost = result.lineJobHost;
        let data = [];
        data.push({ id: targetBranch, text: targetBranch });
        $(this.refs.master).select2({
          data,
          placeholder: "选择主分支"
        });
        $(this.refs.onlineDb).val(lineDb).trigger('change');
        $(this.refs.testDb).val(testDb).trigger('change');
        $(this.refs.onlineHost).val(lineHost).trigger('change');
        $(this.refs.testHost).val(testHost).trigger('change');
        $(this.refs.prevHost).val(prevHost).trigger('change');
        this.setState({
          isTestJobDeployed: result.isTestJobDeployed ? 1 : 0,
          isPrevJobDeployed: result.isPrevJobDeployed ? 1 : 0,
          reponsitoryDirectory: result.reponsitoryDirectory,
          deployDirectory: result.lineHostDirectory,
          lineJobHost, lineHost, testHost, prevHost, lineDb, testDb, targetBranch
        });
        this.initJobServers();
      });
    }else{
      $(this.refs.master).select2({
        placeholder: "请点击右侧刷新按钮"
      });
    }
    $(this.refs.onlineHost).on('change.select2', this.initJobServers.bind(this));
    if(this.props.deployUrl !== ""){
      this.initHosts();
      this.initDbConnectors();
      this.initRoles();
    }
  }

  initJobServers(){
    let onlineHostArr = [];
    onlineHostArr.push({ id: "0", text: "线上不自动部署job" });
    for(let onlineHost of $(this.refs.onlineHost).val()){
      onlineHostArr.push({ id: onlineHost, text: onlineHost });
    }
    $(this.refs.lineJobHost).empty().select2({
      data: onlineHostArr,
      placeholder: "选择微服务线上job使用的服务器（非必填）"
    });
    $(this.refs.lineJobHost).val(this.state.lineJobHost).trigger('change');
  }

  setLoading(loadingFlg){
    this.setState({isLoading: loadingFlg});
  }

  initHosts(){
    let that = this;
    let list = [];
    let initList = function(list){
      let data = [];
      for (let host of list) {
        if (host.projectId === that.state.pid) {
          data.push({ id: host.hostName, text: host.hostName });
        }
      }
      $(that.refs.onlineHost).select2({
        placeholder: "请选择线上代码运行的服务器，可多选",
        data
      });
      $(that.refs.onlineHost).val(that.state.lineHost).trigger('change');
      $(that.refs.onlineHost).on("change", function (e) {
        that.setState({
          lineHost: $(that.refs.onlineHost).val()
        });
      });
      $(that.refs.testHost).select2({
        placeholder: "请选择测试环境代码运行的服务器，可多选",
        data
      });
      $(that.refs.prevHost).select2({
        placeholder: "请选择预发布环境代码运行的服务器，可多选",
        data
      });
      $(that.refs.testHost).val(that.state.testHost).trigger('change');
      $(that.refs.testHost).on("change", function (e) {
        that.setState({
          testHost: $(that.refs.testHost).val()
        });
      });
      $(that.refs.prevHost).val(that.state.prevHost).trigger('change');
      $(that.refs.prevHost).on("change", function (e) {
        that.setState({
          prevHost: $(that.refs.prevHost).val()
        });
      });
    }
    if(this.props.hosts.length === 0){
      this.props.deployUrl !== null && function_get_hosts(this.props.deployUrl, this.state.pid, this.props.dispatch, list => {
        initList(list);
      });
    }else{
      list = this.props.hosts;
      initList(list);
    }
  }

  initDbConnectors(){
    let that = this;
    let list = [];
    let initList = function(list){
      let data = [];
      data.push({ id: "0", text: "请选择线上连接使用的数据库（可不选）" });
      for (let dbConnector of list) {
        if (dbConnector.projectId === that.state.pid) {
          data.push({ id: dbConnector.dbConnectorName, text: dbConnector.dbConnectorName });
        }
      }
      $(that.refs.onlineDb).select2({
        placeholder: "请选择线上代码连接的数据库",
        data
      });
      $(that.refs.onlineDb).val(that.state.lineDb).trigger('change');
      $(that.refs.testDb).select2({
        placeholder: "请选择测试环境连接的数据库",
        data
      });
      $(that.refs.testDb).val(that.state.testDb).trigger('change');
    }

    if(that.props.dbconnectors.length === 0){
      this.props.deployUrl !== null && function_get_dbconnectors(that.props.deployUrl, that.state.pid, that.props.dispatch, list=>{
        initList(list);
      });
    }else{
      list = that.props.dbconnectors;
      initList(list);
    }
  }

  initRoles(){
    this.hasInitedRoles = true;
    if (this.props.projectList[this.state.pid].admin.indexOf(this.props.myuid) === -1) {
      this.setState({
        hasError: true,
        errorMsg: "仅上线人员有权添加微服务，请在项目设置中配置好相关人员"
      });
      $(this.refs.submitBUtton).hide();
    } else if (this.props.deployUrl === null) {
      this.setState({
        hasError: true,
        errorMsg: "尚未设置客户端工具链接地址，点击<a href=\"" + URL.download_page + "\">这里</a>进行设置"
      });
      $(this.refs.submitBUtton).hide();
    } else {
      this.setState({
        hasError: false,
        errorMsg: ""
      });
      $(this.refs.submitBUtton).show();
    }
  }

  componentDidUpdate(prevProps){
    if(prevProps.deployUrl === "" && this.props.deployUrl !== ""){
      this.initHosts();
      this.initDbConnectors();
    }
    if(!this.hasInitedRoles && Object.keys(this.props.projectList).length>0){
      this.initRoles();
    }
  }

  getBranches () {
    let directory = $(this.refs.git_base).val();
    function_get_branches_by_dir(this.props.deployUrl, directory, (list) => {
      let data = [];
      for(let item of list){
        if(item === null) continue;
        data.push({ id: item, text: item });
      }
      $(this.refs.master).empty().select2({
        data,
        placeholder: "选择主分支"
      });
      $(this.refs.master).val(this.state.targetBranch).trigger('change');
    });
  }

  setValidated (validated) {
    this.setState({
      validated
    });
  }

  handleSubmit (event) {
    let jobType = $(this.refs.jobType).val();
    let lineJobHost = $(this.refs.lineJobHost).val();
    if(lineJobHost === "0"){
      lineJobHost = "";
    }
    let isTestJobDeployed = this.state.isTestJobDeployed;
    let isPrevJobDeployed = this.state.isPrevJobDeployed;
    let service_name = $(this.refs.name).val();
    let service_directory = $(this.refs.git_base).val();
    let service_master = $(this.refs.master).val();
    let service_host = this.state.lineHost;
    let service_test_host = this.state.testHost;
    let service_prev_host = this.state.prevHost;
    let deploy_directory = this.state.deployDirectory;
    let deploy_db = $(this.refs.onlineDb).val();
    let deploy_test_db = $(this.refs.testDb).val();
    let commandBeforePackage = $(this.refs.commandBeforePackage).val();
    let udtGitDir = $(this.refs.udtGitDir).val();
    if (commandBeforePackage.indexOf(";") !== -1) {
      commandBeforePackage = commandBeforePackage.split(";");
    } else {
      commandBeforePackage = commandBeforePackage.split("\n");
    }
    let packageDir = $(this.refs.packageDir).val();
    let excludeFiles = $(this.refs.excludeFiles).val();
    if (excludeFiles.indexOf(";") !== -1) {
      excludeFiles = excludeFiles.split(";");
    } else {
      excludeFiles = excludeFiles.split("\n");
    }
    let commandBeforeDeploy = $(this.refs.commandBeforeDeploy).val();
    if (commandBeforeDeploy.indexOf(";") !== -1) {
      commandBeforeDeploy = commandBeforeDeploy.split(";");
    } else {
      commandBeforeDeploy = commandBeforeDeploy.split("\n");
    }
    let commandAfterDeploy = $(this.refs.commandAfterDeploy).val();
    if (commandAfterDeploy.indexOf(";") !== -1) {
      commandAfterDeploy = commandAfterDeploy.split(";");
    } else {
      commandAfterDeploy = commandAfterDeploy.split("\n");
    }
    if (service_master == null) {
      this.setState({
        hasError: true,
        errorMsg: "请选择该微服务主分支"
      });
      event.preventDefault();
      event.stopPropagation();
      return;
    }
    if (service_host.length === 0) {
      this.setState({
        hasError: true,
        errorMsg: "需要至少配置一台线上部署的服务器"
      });
      event.preventDefault();
      event.stopPropagation();
      return;
    }

    this.setState({
      hasError: false,
      errorMsg: ""
    });

    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
      this.setValidated(true);
      return;
    }
    this.setLoading(true);
    if (this.props.location.pathname === URL.editserv_page) {
      function_edit_servs(
        this.state.pid,
        this.state.sid,
        this.props.dispatch,
        service_name,
        service_directory,
        service_master,
        service_host,
        service_test_host,
        service_prev_host,
        deploy_directory,
        deploy_db,
        deploy_test_db,
        commandBeforePackage,
        packageDir,
        excludeFiles,
        commandBeforeDeploy,
        commandAfterDeploy,
        udtGitDir,
        jobType,
        lineJobHost,
        isTestJobDeployed,
        isPrevJobDeployed,
        result => {
          if (result.code === CODE.SUCCESS) {
            this.props.history.push(URL.project_page + "?pid=" + this.state.pid);
            this.setLoading(false);
          }
        }
      );
    } else {
      function_add_servs(
        this.state.pid,
        this.props.dispatch,
        service_name,
        service_directory,
        service_master,
        service_host,
        service_test_host,
        service_prev_host,
        deploy_directory,
        deploy_db,
        deploy_test_db,
        commandBeforePackage,
        packageDir,
        excludeFiles,
        commandBeforeDeploy,
        commandAfterDeploy,
        udtGitDir,
        jobType,
        lineJobHost,
        isTestJobDeployed,
        isPrevJobDeployed,
        result => {
          if (result.code === CODE.SUCCESS) {
            this.props.history.push(URL.project_page + "?pid=" + this.state.pid);
            this.setLoading(false);
          }
        }
      );
    }
    event.preventDefault();
    event.stopPropagation();
  };

  setActiveTab (k) {
    this.setState({activeTab: k});
    setTimeout(()=>{
      if(k === "envire"){
        $(this.refs.testHost).select2('destroy').empty();
        $(this.refs.prevHost).select2('destroy').empty();
        this.initHosts();
        $(this.refs.testDb).select2('destroy').empty();
        this.initDbConnectors();
      }
      if(k === "basic"){
        $(this.refs.onlineHost).select2('destroy').empty();
        this.initHosts();
        $(this.refs.onlineDb).select2('destroy').empty();
        this.initDbConnectors();
      }
    }, 250);
  }

  render () {
    return (
      <Container>
        <Breadcrumb>
          <Breadcrumb.Item href={URL.main_page}>项目列表</Breadcrumb.Item>
          <Breadcrumb.Item href={URL.project_page + "?pid=" + this.state.pid}>微服务</Breadcrumb.Item>
          <Breadcrumb.Item active>
            {this.props.location.pathname === URL.addserv_page ? "创建" : "编辑"}
          </Breadcrumb.Item>
        </Breadcrumb>
        {this.state.hasError || !this.props.canDeployConnect ?
          <Alert variant="danger">
            {!this.props.canDeployConnect ? 
              (this.props.deployUrl == null ? 
                "当前团队未配置上线工具客户端，请到"+H5_URL+URL.download_page+"进行配置"
                :
                "无法连接到"+this.props.deployUrl+"，请检查服务器配置") : 
              this.state.errorMsg
            }
          </Alert>
          : null}
        <Form className="serverAddForm" noValidate validated={this.state.validated} onSubmit={this.handleSubmit.bind(this)}>
          <Tabs activeKey={this.state.activeTab} onSelect={k => this.setActiveTab(k)}>
            <Tab eventKey="basic" title="基础设置">
              <Row className="serverAdd">
                <Col sm={7}>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      微服务名称
                    </Form.Label>
                    <Col sm="9">
                      <Form.Control
                        ref="name"
                        required />
                      <Form.Control.Feedback type="invalid">
                        请填写您微服务的名称
                      </Form.Control.Feedback>
                    </Col>
                  </Form.Group>
                  <Form.Group>
                    <Row>
                      <Form.Label column sm="3">git文件夹目录</Form.Label>
                      <Col sm="9">
                        <Form.Control
                          ref="git_base"
                          required
                          placeholder="必填，是分支合并和代码分发的来源" />
                        <Form.Control.Feedback type="invalid">
                          请填写在/usr/local/onlintool/reponsitory文件夹下的项目名称
                        </Form.Control.Feedback>
                      </Col>
                    </Row>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      主分支
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="master" as="select"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>刷新分支列表</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" className="icon" onClick={this.getBranches.bind(this)}>&#xe62f;</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      线上服务器
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="onlineHost" as="select" multiple="multiple"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>新增服务器连接</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" onClick={() => this.setState({ showAddHost: true })}>+</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      线上数据库
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="onlineDb" as="select"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>新增数据库连接</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" onClick={() => this.setState({ showAddＤbConnector: true })}>+</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      job管理工具
                    </Form.Label>
                    <Col sm={9}>
                      <Form.Control
                        ref="jobType"
                        as="select">
                        <option value="1">PM2</option>
                      </Form.Control>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      线上job服务器
                    </Form.Label>
                    <Col sm={9}>
                      <Form.Control ref="lineJobHost" as="select"></Form.Control>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      部署目录
                    </Form.Label>
                    <Col sm="9">
                      <Form.Control
                        required
                        ref="deployDirectory"
                        value={this.state.deployDirectory}
                        onChange={event=>this.setState({deployDirectory: $(event.target).val()})} />
                      <Form.Control.Feedback type="invalid">
                        请填写微服务代码经过编译后，在线上服务器部署的路径
                      </Form.Control.Feedback>
                    </Col>
                  </Form.Group>
                </Col>
                <Col sm={5}>
                  <ul>
                    <li>git文件夹目录</li>
                    <p>请在运行客户端工具的服务器（<strong>{this.props.deployHost}</strong>）上的/usr/local/onlinetool/reponsitory目录中，克隆一份该微服务git的代码并切换到主分支，命令如：<code>git clone git@gitee.com:onlinetool/onlinetool_client.git -b onlinetool myDirName</code>，并将克隆后的<strong className="text-danger">文件夹名称，如 myDirName</strong>填到这里</p>
                    <li>主分支</li>
                    <p>该git代码在线上部署的分支</p>
                    <li>部署目录</li>
                    <p><strong>线上运行的微服务</strong>在<strong>线上服务器</strong>中所在的目录</p>
                  </ul>
                </Col>
              </Row>
            </Tab>
            <Tab eventKey="package" title="打包发布">
              <Row className="serverAdd">
                <Col sm={7}>
                  <Form.Group>
                    <Form.Label>打包前执行命令</Form.Label>
                    <Form.Control
                      ref="commandBeforePackage"
                      as="textarea"
                      rows="3"
                      className="textarea-code" />
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      需要打包的目录
                    </Form.Label>
                    <Col sm="9">
                      <Form.Control
                        ref="packageDir"
                        defaultValue="%root%" />
                    </Col>
                  </Form.Group>
                  <Form.Group>
                    <Form.Label>打包目录下需要排除的文件或目录</Form.Label>
                    <Form.Control
                      ref="excludeFiles"
                      as="textarea"
                      rows="3"
                      defaultValue=".git;.vscode;.idea"
                      className="textarea-code">
                    </Form.Control>
                  </Form.Group>
                  <Form.Group>
                    <Form.Label>部署完成后执行的命令</Form.Label>
                    <Form.Control ref="commandBeforeDeploy" as="textarea" rows="3" className="textarea-code" />
                  </Form.Group>
                  <Form.Group>
                    <Form.Label>上线后执行的命令</Form.Label>
                    <Form.Control ref="commandAfterDeploy" as="textarea" rows="3" className="textarea-code" />
                  </Form.Group>
                </Col>
                <Col sm={5}>
                  <ul>
                    <li>打包前执行命令</li>
                    <p>在分支合并完成后，代码分发到各个服务器前执行的shell命令，一行一个，如：</p>
                    <Highlight language="bash">
                      composer install // PHP <br />
                      npm run build // webpack <br />
                      gradle bootJar // java <br />
                      docker build . -t myservice // docker <br />
                    </Highlight>
                    <li>需要打包的目录</li>
                    <p>%root% 代表微服务的全部代码，对于java web项目而言，则是<code>%root%/build</code></p>
                    <p>不填写则代表不需要打包发布（如在各个服务器上执行shell拉代码等方式）</p>
                    <li>部署完成后执行的命令</li>
                    <p>部署完成后在每台部署过的机器上执行的命令，如：</p>
                    <Highlight language="bash">
                      service php-fpm reload <br />
                      nohup java -jar user.jar <br />
                    </Highlight>
                    <li>上线后执行的命令</li>
                    <p>上线后在客户端服务器上执行的shell命令，如刷cdn缓存等</p>
                  </ul>
                </Col>
              </Row>
            </Tab>
            <Tab eventKey="envire" title="环境设置">
              <Row className="serverAdd">
                <Col sm={7}>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      环境服务器git目录
                    </Form.Label>
                    <Col sm="9">
                      <Form.Control
                        ref="udtGitDir"
                        defaultValue={this.state.deployDirectory}
                        required />
                      <Form.Control.Feedback type="invalid">
                        请填写环境服务器git目录的路径
                      </Form.Control.Feedback>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      测试环境服务器
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="testHost" as="select" multiple="multiple"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>新增服务器连接</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" onClick={() => this.setState({ showAddHost: true })}>+</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      测试环境数据库
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="testDb" as="select"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>新增数据库连接</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" onClick={() => this.setState({ showAddＤbConnector: true })}>+</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      测试环境job相关
                    </Form.Label>
                    <Col sm="9">
                      <Form.Check inline label="自动部署job" value="1" name="isTestJobDeployed" type="radio" checked={this.state.isTestJobDeployed === 1} onChange={event=>this.setState({isTestJobDeployed: 1})} />
                      <Form.Check inline label="不自动部署" value="0" name="isTestJobDeployed" type="radio" checked={this.state.isTestJobDeployed === 0} onChange={event=>this.setState({isTestJobDeployed: 0})} />
                    </Col>
                  </Form.Group>  
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      预发布环境服务器
                    </Form.Label>
                    <Col sm="9">
                      <InputGroup>
                        <FormControl ref="prevHost" as="select" multiple="multiple"></FormControl>
                        <InputGroup.Append>
                          <OverlayTrigger
                            placement="bottom"
                            overlay={
                              <Tooltip>
                                <strong>新增服务器连接</strong>
                              </Tooltip>
                            }>
                            <Button variant="outline-warning" onClick={() => this.setState({ showAddHost: true })}>+</Button>
                          </OverlayTrigger>
                        </InputGroup.Append>
                      </InputGroup>
                    </Col>
                  </Form.Group>
                  <Form.Group as={Row}>
                    <Form.Label column sm="3">
                      预发布环境job相关
                    </Form.Label>
                    <Col sm="9">
                      <Form.Check inline label="自动部署job" value="1" name="isPrevJobDeployed" type="radio" checked={this.state.isPrevJobDeployed === 1} onChange={event=>this.setState({isPrevJobDeployed: 1})} />
                      <Form.Check inline label="不自动部署" value="0" name="isPrevJobDeployed" type="radio" checked={this.state.isPrevJobDeployed === 0} onChange={event=>this.setState({isPrevJobDeployed: 0})} />
                    </Col>
                  </Form.Group>  
                </Col>
                <Col sm={5}>
                  <ul>
                    <li>环境服务器git目录</li>
                    <p>
                      为加快发布速度，要求在测试/预发布环境的服务器上需要有对应微服务的一个git文件夹。发布时将从该服务器上的git文件夹进行分支切换和源码编译部署
                    </p>
                    <li>测试环境服务器</li>
                    <ol>
                      <li>要求同一个项目的所有微服务部署在同一台测试服务器上，并且微服务部署目录同线上环境一致</li>
                      <li>配置多个测试环境服务器是为了允许多个测试人员同时进行多个功能在测试环境的并行部署测试</li>
                      <li>由开发人员或测试人员决定使用哪一台服务器进行部署测试</li>
                    </ol>
                  </ul>
                </Col>
              </Row>
            </Tab>
          </Tabs>
          <Col sm={{ span: 4, offset: 2 }}>
          {this.props.location.pathname === URL.addserv_page ?
            <Button type="submit" disabled={this.state.isLoading} variant="success" ref="submitBUtton">添加微服务</Button> :
            <Button type="submit" disabled={this.state.isLoading} variant="info" ref="submitBUtton">修改微服务</Button>
          }
          </Col>
        </Form>
        <AddHost
          show={this.state.showAddHost}
          handleClose={() => this.setState({ showAddHost: false })}
          handleSubmit={() => {
            $(this.refs.onlineHost).select2('destroy').empty();
            function_get_hosts(this.props.deployUrl, this.state.pid, this.props.dispatch, list => {
              let data = [];
              for (let host of list) {
                if (host.projectId === this.state.pid) {
                  data.push({ id: host.hostName, text: host.hostName });
                }
              }
              $(this.refs.onlineHost).select2({
                placeholder: "请选择线上代码运行的服务器，可多选",
                data
              });
            });
          }}
          projectId={this.state.pid} />
        <AddDbConnector
          show={this.state.showAddＤbConnector}
          handleClose={() => this.setState({ showAddＤbConnector: false })}
          handleSubmit={() => {
          }}
          projectId={this.state.pid} />
        </Container >
      )
    }
  }

function mapStateToProps (state) {
  return {
    myuid: state.account.uid,
    deployUrl: state.deploy.deployUrl,
    deployHost: state.deploy.deployHost,
    canDeployConnect: state.deploy.canDeployConnect,
    hosts: state.deploy.hosts,
    dbconnectors: state.deploy.dbconnectors,
    branches: state.deploy.branches,
    projectList: state.project,
  }
}

export default connect(mapStateToProps)(App);